﻿<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>重名查询</title>

    <link type="text/css" href="/szgawx/static/plugins/css/common.css" rel="stylesheet"/>

    <style type="text/css">

        .main {

        font-size: 1.6em;

        margin: 8px;

        }

        .main .form {

        height: 50px;

        line-height: 50px;

        border: 1px solid #dddddd;

        width: 100%;

        border-radius: 3px;

        }

        .main .form .label {

        height: 50px;

        line-height: 50px;

        color: #157dfb;

        text-indent: 0.8em;

        float: left;

        width: 70px;

        }

        .main .form .element {

        height: 50px;

        line-height: 50px;

        margin-left: 75px;

        display: block;

        }

        .main .form .element input {

        color: #666;

        font-family: "微软雅黑", serif;

        text-indent: 0.3em;

        border: 0;

        width: 98%;

        font-size: 1.0em;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

        }

        .main .btn:active {

        background-color: #3300ff;

        cursor: hand;

        }

        #result {

        min-height: 6em;

        margin: 0 10px;

        line-height: 2;

        height: 2em;

        color: #837D7D;

        }

        .main .uptop {

        margin-top: -1.6em;

        }

		 .tab_title {

        height: 33px;

        border: 1px solid #157dfb;

        border-radius: 6px;

        background-color: #157dfb;

    }



    .tab_title .tab_item {

        width: 50%;

        display: inline-block;

        float: left;

        text-align: center;

        height: 33px;

        line-height: 33px;

        color: #706C6C;

        font-size: 1.6em;

        cursor: hand;

        background-color: #fff;

    }



    .tab_title .checked {

        background-color: transparent;

        color: #fff;

    }



    .tab_title .tab_left {

        border-top-left-radius: 5px;

        border-bottom-left-radius: 5px;

    }



    .tab_title .tab_right {

        border-top-right-radius: 5px;

        border-bottom-right-radius: 5px;

    }

	.title-bar {

        border: none;

		top: 0;

		height: 2.6em;

		line-height: 2.6em;

		text-indent: 0.4em;

		width: 100%;

		font-size: 1.8em;

		font-weight: 500;

		color: #eaeaea;

		background-color: #000000;

		display: -webkit-box;

		z-index: 999;

    }



    .title-bar .title {

        background-color: #17b4eb;

        -webkit-box-flex: 1;

        text-align: center;

        display: block;

    }



    .title-bar .btn-back {

        background-color: #17b4eb;

        border-top-left-radius: 0.7em;

        display: block;

        width: 3.0em;

        border-right: 1px solid rgba(197, 238, 220, 0.67);

    }



    .title-bar .btn-oper {

        border-top-right-radius: 0.7em;

        background-color: #17b4eb;

        display: block;

        width: 3.0em;

        text-align: center;

        width: -webkit-fit-content;

        min-width: 3.0em;

    }

    </style>

</head>

<body>

<div class="main">

    <div class="form">

        <span class="label">姓名：</span>

        <span class="element"><input id="txt_name" class="no-border" type="text" placeholder="请输入要查询的姓名"/></span>

    </div>

    <div><a class="btn simple no-border" id="btn_query">查 询</a></div>

    <div id="result"></div>

</div>

<script type="text/javascript" src="/szgawx/static/plugins/js/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="/szgawx/static/plugins/js/common.js"></script>

<script type="text/javascript">

	var _preFix = getServerPreFix();

    $(function () {

        $("#btn_query").click(function () {

            var name = $("#txt_name").val().trim();

            if (name == null || name == "") {

                toast("请输入要查询的姓名", 1500);

                return;

            }

            $.ajax({

                url: _preFix+"/szgawx/api/query/name",

                type: "post",
                
                dataType:"json",

                data: {"name": name},

                timeout: 6000,

                beforeSend: function () {

                    loading();

                },

                success: function (data) {
//{female=0, male=1}
                    $("#result").html("系统存在此姓名的人数为"+(data.data.genders.female+data.data.genders.male));

                    finish();

                },

                error: function () {

                    finish("查询失败")

                }

            });

            event.stopPropagation();

            return false;

        });

    });

	

	

	function goBack(){

		navigator.intent.goback(0);

	}

    /**

     * 清空结果显示DIV内容

     * */

    function reset() {

        //TODO:清空结果显示DIV内容

//        $("#result div")

    }

    /**

     * 显示Toast消息,

     * @param msg Toast显示内容

     * @duration Toast显示时间[可行，默认显示4s]

     */

    function showToast(msg, duration) {

        var _toast = $("#toast");

        if (_toast.is(":hidden")) {

            _toast.empty().html(msg).addClass("show");

            setTimeout(function () {

                $("#toast").removeClass("show");

            }, duration ? duration : 4000);

        }

    }



</script>

<div style="width:94%; float:left; margin-left:3%; line-height:28px; font-family:'微软雅黑'; font-size:14px; color:#ff0000; position:absolute; bottom:10px;">提示说明：您可以输入某人的姓名，来查看和此人重名的人数。</div>

</body>

</html>

